<!-- 实时 -->

<template>
  <div />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import UTIL from '@admin/views/Secure/Patrol/UTIL'

const { AMap } = window

const getContent = (item) => `
<div>
  <div class="MajorTitle"><span class="MajorTitle-prop">${item.userName}</span></div>
  <div>${item.areaName || '-'}</div>
  <div>${CORE.timeStr(item.time) || '-'}</div>
</div>
`

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MapRealtime',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixSelect('realtime', 'realtime_')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 是否全部就绪
     */
    readyAll() {
      return this.MAP.readyMap && this.param.tab === this.DICT.TAB[0][0] && this.realtime_readySelect
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听全部就绪
     */
    readyAll: {
      immediate: true,
      handler(ready) {
        ready && this.addToMap()
      },
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 添加到地图
     */
    addToMap() {
      const { map } = this.MAP
      const select = this.realtime_select.filter((item) => item.lon && item.lat)
      const length = select.length

      // 清空
      map.clearMap()

      // 文本标记点
      select.forEach((item, i) => {
        const text = `<img src="${UTIL.getImg('user.png')}">`
        const zIndex = !i || i === length - 1 ? length : i
        const position = new AMap.LngLat(item.lon, item.lat)

        const marker = new AMap.Text({ text, zIndex, position })
        marker.setLabel({ direction: 'top', content: getContent(item) })
        map.add(marker)
      })

      // 自适应缩放显示
      map.setFitView()
    },
  },
}
</script>
